fix: hydration mismatches by saving changed tokens - #467

Hi folks!

When using twind v1 on Deno's Fresh I faced this TBT performance issue. Taking a deeper look into the performance bottleneck, I noticed we had two main performance issues.

The first one was clearing the style sheet, which causes the browser to "recalculate the style", creating a long task. To fix this issue, I just stopped clearing the sheet on resume.

The second issue is a little more subtle. Turns out that this translate function takes a long time to execute. It's usually ok when dynamically changing styles, however, when running it alongside (P)react's hydration, it can greatly increase this task's blocking time. The puzzling piece is that this part of the code should never be reached if the sheet's resume process occurs successfully. Investigating further, I noticed that tokens like md:(w-full h-full) get translated into the final html as md:w-full md:h-full, so when the tw's cache is resumed, the initial tokens are missing. To address this issue I made this cache to be resumable too by adding a new extracted json parameter that can be added as a

<script type="application/json" data-twind-cache >{ "(md:(w-full h-full))": "md:w-full md:h-full" }</script>

The nice thing about it is that it only stores the tokens where tw(token) != token, not adding any unnecessary bloat to the final html.

After applying these two performance improvements, my app's blocking time went from: 700ish ms to 150ish ms on Google's Page Speed Insights.

Another solution to this problem would be to make this translate function much faster, however I could not really understand how to do this.

Let me know if you have a better idea than shipping the tw's cache to the final html.

Thanks!

Please don't delete this checklist! Before submitting the PR, please make sure you do the following:

• It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason.
• This message body should clearly illustrate what problems it solves.
• Ideally, include a test that fails without this PR but passes with it.

Tests

• Run the tests with pnpm test and verify the project with pnpm check

Changesets

• If your PR makes a change that should be noted in one or more packages' changelogs, generate a changeset by running pnpx changeset and following the prompts. All changesets should be patch until Twind 1.0